<template>
  <div class="hero-page">
    <!-- 顶部导航栏 -->
    <TopNavbar 
      @navigate="handleNavigation" 
      @show-login="showLogin"
      @show-register="showRegister"
      @logout="handleLogout"
    />
    
    <!-- 英雄列表/三栏布局 -->
    <div class="valkyrie-layout" v-if="!loading">
      <!-- 左：英雄名字标题和竖排英雄名字列表 -->
      <aside class="valkyrie-left">
        <h2 class="codename" v-if="selectedHero">{{ selectedHero.title || selectedHero.heroName }}</h2>
        <ul class="name-list">
          <li
            v-for="hero in heroes"
            :key="hero.id"
            class="name-item"
            :class="{ active: selectedHero && selectedHero.id === hero.id }"
            @click="selectHero(hero)"
          >
            <span class="dot"></span>
            <span class="name-text">{{ hero.heroName || hero.name }}</span>
          </li>
        </ul>
      </aside>

      <!-- 中：大图展示 -->
      <main class="valkyrie-center">
        <div class="hero-illus" v-if="selectedHero">
          <img :src="selectedHero.largeIconUrl || selectedHero.imageUrl || defaultHeroImage" :alt="selectedHero.heroName || selectedHero.name" />
        </div>
        <div v-else class="hero-illus placeholder"></div>
      </main>

      <!-- 右：属性与缩略图、视频海报 -->
      <aside class="valkyrie-right" v-if="selectedHero">
        <div class="meta-header">
         
        </div>

        <div class="meta-list">
          <div class="meta-row name-with-icon">
            <span class="label">姓名：</span>
            <div class="name-icon-group">
              <img class="hero-mini-icon" :src="selectedHero.smallIconUrl || selectedHero.avatarUrl || defaultAvatarImage" :alt="selectedHero.heroName || selectedHero.name" />
              <span class="value">{{ selectedHero.heroName || selectedHero.name || '-' }}</span>
            </div>
          </div>
          <div class="meta-row-double">
            <div class="meta-item">
              <span class="label">称谓：</span>
              <span class="value">{{ selectedHero.title || '-' }}</span>
            </div>
            <div class="meta-item">
              <span class="label">属性：</span>
              <span class="value">{{ selectedHero.attributeType || '-' }}</span>
            </div>
          </div>
          <div class="meta-row-double">
            <div class="meta-item">
              <span class="label">作战方式：</span>
              <span class="value">{{ selectedHero.weaponType || selectedHero.combatStyle || '-' }}</span>
            </div>
            <div class="meta-item">
              <span class="label">伤害类型：</span>
              <span class="value">{{ selectedHero.damageType || '-' }}</span>
            </div>
          </div>
          <div class="meta-row"><span class="label">星环分野：</span><span class="value">{{ selectedHero.starRingDivision || '-' }}</span></div>
        </div>



        <!-- 背景介绍区域 -->
        <div class="background-description" v-if="selectedHero && selectedHero.backgroundDescription">
          <div class="description-header">
            <h3 class="description-title">背景介绍</h3>
            <div class="description-divider"></div>
          </div>
          <div class="description-content">
            <p class="description-text">{{ selectedHero.backgroundDescription }}</p>
          </div>
        </div>
<!-- 
        <div class="thumb-strip">
          <div
            v-for="hero in heroes"
            :key="'mini-' + hero.id"
            class="mini-thumb"
            :class="{ active: selectedHero && selectedHero.id === hero.id }"
            @click="selectHero(hero)"
            @mouseenter="handleThumbEnter(hero)"
            @mouseleave="handleThumbLeave"
          >
            <img :src="hero.smallIconUrl || hero.avatarUrl || defaultAvatarImage" :alt="hero.heroName || hero.name" />
          </div>
        </div> -->
        
        <!-- 技能展示区域 -->
        <div class="skills-section" v-if="selectedHero">
          <div class="skills-header">
            <h3 class="skills-title">{{ (hoveredHero ? (hoveredHero.heroName || hoveredHero.name) : (selectedHero.heroName || selectedHero.name)) }} 的技能</h3>
            <div class="skills-divider"></div>
          </div>
          
          <!-- 技能加载状态 -->
          <div v-if="skillsLoading" class="skills-loading">
            <div class="loading-spinner"></div>
            <p>加载技能中...</p>
          </div>
          

          
          <!-- 技能列表 -->
          <div v-if="!skillsLoading && heroSkills.length > 0" class="skills-list">
            <div 
              v-for="skill in heroSkills" 
              :key="skill.skillId" 
              class="skill-card clickable-skill"
              @click="viewSkillDetail(skill)"
            >
              <div class="skill-header">
                <h4 class="skill-name">{{ skill.skillName }}</h4>
                <div class="detail-icon">📋</div>
              </div>
              
              <!-- 技能gif展示 -->
              <div class="skill-gif" v-if="skill.gifUrl">
                <img :src="skill.gifUrl" :alt="skill.skillName + ' gif'" class="skill-gif-image" />
              </div>
              
              <div class="skill-description" v-if="skill.skillDescription">
                <p>{{ skill.skillDescription }}</p>
              </div>
              
              <div class="skill-actions">
                <div class="skill-detail-btn" @click.stop="viewSkillDetail(skill)">
                  <span class="detail-btn-icon">👁️</span>
                  查看详情
                </div>
                <div class="skill-video-btn" v-if="skill.videoUrl" @click.stop="playSkillVideo(skill)">
                  <span class="video-btn-icon">▶</span>
                  播放视频
                </div>
              </div>
            </div>
          </div>
          
          <!-- 无技能提示 -->
          <div v-if="!skillsLoading && heroSkills.length === 0" class="no-skills">
            <p>该英雄暂无技能信息</p>
          </div>
        </div>
        
        <!-- 推荐武器区域 -->
        <div class="weapons-section" v-if="selectedHero">
          <div class="weapons-header">
            <h3 class="weapons-title">推荐武器</h3>
            <div class="weapons-divider"></div>
          </div>
          
          <!-- 武器加载状态 -->
          <div v-if="weaponsLoading" class="weapons-loading">
            <div class="loading-spinner"></div>
            <p>加载武器中...</p>
          </div>
          
          <!-- 武器列表 -->
          <div v-if="!weaponsLoading && heroWeapons.length > 0" class="weapons-list">
            <div 
              v-for="weapon in heroWeapons" 
              :key="weapon.weaponId" 
              class="weapon-card clickable-weapon"
              @click="viewWeaponDetail(weapon)"
            >
              <div class="weapon-image">
                <img :src="weapon.weaponSkillUrl || '/default-weapon.png'" :alt="weapon.weaponName" />
              </div>
              <div class="weapon-info">
                <h4 class="weapon-name">{{ weapon.weaponName }}</h4>
                <div class="weapon-stats">
                  <span class="stat-item">攻击力: {{ weapon.attack }}</span>
                  <span class="stat-item">暴击率: {{ weapon.critRate }}%</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 无武器提示 -->
          <div v-if="!weaponsLoading && heroWeapons.length === 0" class="no-weapons">
            <p>该英雄暂无推荐武器</p>
          </div>
        </div>
      </aside>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>

    <!-- 错误状态 -->
    <div v-if="error" class="error-container">
      <p>{{ error }}</p>
      <button @click="loadHeroes" class="retry-btn">重试</button>
    </div>
    

    
    <!-- 技能视频播放器 -->
    <VideoPlayer
      v-if="showSkillVideoPlayer && currentSkillVideo && currentSkillVideo.videoUrl"
      :video-url="currentSkillVideo.videoUrl"
      :poster-url="currentSkillVideo.imageUrl || (selectedHero && selectedHero.largeIconUrl) || defaultVideoPoster"
      :show-modal="true"
      :autoplay="true"
      @close="closeSkillVideoPlayer"
      @ended="closeSkillVideoPlayer"
    />
  </div>
</template>

<script>
import { heroApi } from '../api/hero.js'
import { skillApi } from '../api/skill.js'
import { weaponApi } from '../api/weapon.js'

import TopNavbar from './TopNavbar.vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'


export default {
  name: 'HeroPage',
  components: {
    TopNavbar
  },
  setup() {
    const router = useRouter()
    const userStore = useUserStore()
    return { router, userStore }
  },
  data() {
    return {
      heroes: [],
      selectedHero: null,
      heroSkills: [], // 当前选中英雄或悬停英雄的技能列表
      skillsLoading: false, // 技能加载状态
      hoveredHero: null, // 当前悬停的英雄
      skillsCache: {}, // 技能缓存，按 heroId 存储
      heroWeapons: [], // 当前选中英雄的推荐武器列表
      weaponsLoading: false, // 武器加载状态
      weaponsCache: {}, // 武器缓存，按 heroId 存储
      loading: true,
      error: null,
      showSkillVideoPlayer: false,
      currentSkillVideo: null,
      defaultHeroImage: 'https://fastcdn.mihoyo.com/content-v2/bh3/157811/92333adce61e1a9e75591e2741dcfd97_7957877470594159892.png',
      defaultAvatarImage: 'https://fastcdn.mihoyo.com/content-v2/bh3/156251/ea55b240730debec811239cbb393a7bb_2296978660569028145.png'
    }
  },
  mounted() {
    this.loadHeroes()
  },
  methods: {
    async loadHeroes() {
      try {
        this.loading = true
        this.error = null
        
        const response = await heroApi.getAllHeroes()
        console.log('API响应数据:', response) // 添加调试日志
        if (response.code === 0) {
          this.heroes = response.data || []
          console.log('英雄数据:', this.heroes) // 添加调试日志
          console.log('第一个英雄的完整数据:', this.heroes[0]) // 检查英雄数据结构
          // 默认选择第一个英雄
          if (this.heroes.length > 0) {
            this.selectedHero = this.heroes[0]
            console.log('选中的英雄ID:', this.heroes[0].id, '类型:', typeof this.heroes[0].id)
            // 加载第一个英雄的技能和推荐武器
            await Promise.all([
              this.loadHeroSkills(this.heroes[0].id),
              this.loadHeroWeapons(this.heroes[0].id)
            ])
          }
        } else {
          this.error = response.message || '获取英雄数据失败'
        }
      } catch (err) {
        console.error('加载英雄数据失败:', err)
        this.error = '网络错误，请稍后重试'
        // 使用模拟数据作为后备
        this.loadMockData()
      } finally {
        this.loading = false
        // 预加载视频缩略图
        this.$nextTick(() => {
          this.preloadVideoThumbnails()
        })
      }
    },
    
    loadMockData() {
      // 模拟数据，用于开发和测试
      this.heroes = [
        {
          id: 1,
          name: '极地战刃',
          favorability: '无量塔姬子',
          birthday: '6月11日',
          combatStyle: '大剑',
          description: '无量塔姬子的战斗装甲，擅长使用大剑进行近战攻击。',
          imageUrl: this.defaultHeroImage,
          avatarUrl: this.defaultAvatarImage
        },
        {
          id: 2,
          name: '白夜执事',
          favorability: '丽塔·洛丝薇瑟',
          birthday: '4月1日',
          combatStyle: '镰刀',
          description: '丽塔的专属战斗装甲，优雅而致命的战斗风格。',
          imageUrl: this.defaultHeroImage,
          avatarUrl: this.defaultAvatarImage
        },
        {
          id: 3,
          name: '雷电女王',
          favorability: '雷电芽衣',
          birthday: '4月13日',
          combatStyle: '太刀',
          description: '雷电芽衣的强力装甲，掌控雷电之力。',
          imageUrl: this.defaultHeroImage,
          avatarUrl: this.defaultAvatarImage
        }
      ]
      this.selectedHero = this.heroes[0]
      this.error = null
    },
    
    async selectHero(hero) {
      console.log('选中英雄:', hero)
      this.selectedHero = hero
      // 选中后加载该英雄技能和推荐武器
      await Promise.all([
        this.loadHeroSkills(hero.id),
        this.loadHeroWeapons(hero.id)
      ])
    },
    
    // 鼠标移入缩略图：仅展示该英雄技能，不改变选中英雄
    async handleThumbEnter(hero) {
      console.log('悬停英雄:', hero)
      this.hoveredHero = hero
      await this.loadHeroSkills(hero.id)
    },
    
    // 鼠标移出缩略图：恢复展示选中英雄的技能
    async handleThumbLeave() {
      console.log('离开悬停，恢复选中英雄技能')
      this.hoveredHero = null
      if (this.selectedHero) {
        await this.loadHeroSkills(this.selectedHero.id)
      }
    },
    
    // 加载英雄技能列表（带缓存）
    async loadHeroSkills(heroId) {
      console.log('=== loadHeroSkills 开始 ===');
      console.log('传入的heroId:', heroId, '类型:', typeof heroId);
      
      if (!heroId) {
        console.log('heroId为空，清空技能列表');
        this.heroSkills = []
        return
      }
      
      // 命中缓存，直接使用
      if (this.skillsCache && this.skillsCache[heroId]) {
        console.log('使用缓存的技能数据:', this.skillsCache[heroId])
        this.heroSkills = this.skillsCache[heroId]
        return
      }
      
      try {
        this.skillsLoading = true
        console.log('正在加载英雄技能，heroId:', heroId)
        console.log('即将调用API: /skill/list/hero/' + heroId);
        const response = await skillApi.getSkillsByHeroId(heroId)
        console.log('技能API响应:', response)
        console.log('响应状态码:', response.code);
        console.log('响应数据:', response.data);
        
        if (response.code === 0) {
          const list = response.data || []
          console.log('解析的技能列表:', list)
          console.log('技能列表长度:', list.length);
          // 缓存结果
          this.skillsCache[heroId] = list
          this.heroSkills = list
          console.log('设置heroSkills后:', this.heroSkills)
          console.log('heroSkills长度:', this.heroSkills.length);
        } else {
          console.error('获取技能数据失败:', response.message)
          this.heroSkills = []
        }
      } catch (err) {
        console.error('加载技能数据失败:', err)
        console.error('错误详情:', err.message);
        console.error('错误堆栈:', err.stack);
        this.heroSkills = []
      } finally {
        this.skillsLoading = false
        console.log('=== loadHeroSkills 结束 ===');
        console.log('最终 heroSkills 数组:', this.heroSkills);
        console.log('heroSkills 长度:', this.heroSkills.length);
        console.log('heroSkills 数组详细内容:', JSON.stringify(this.heroSkills, null, 2));
        
        // 检查每个技能对象的字段
        this.heroSkills.forEach((skill, index) => {
          console.log(`技能 ${index + 1}:`, {
            skillId: skill.skillId,
            skillName: skill.skillName,
            skillDescription: skill.skillDescription,
            skillUrl: skill.skillUrl,
            heroId: skill.heroId
          });
        });
      }
    },
    
    // 强制刷新数据
    async forceRefresh() {
      console.log('强制刷新英雄数据...')
      await this.loadHeroes()
      this.$message?.success('数据已刷新')
    },
    

    
    playSkillVideo(skill) {
      // 播放技能视频的逻辑
      if (skill && skill.videoUrl) {
        this.currentSkillVideo = skill
        this.showSkillVideoPlayer = true
      } else {
        console.log('技能暂无视频:', skill.skillName)
        this.$message?.info('该技能暂无视频')
      }
    },
    
    closeSkillVideoPlayer() {
      this.showSkillVideoPlayer = false
      this.currentSkillVideo = null
    },
    
    // 查看技能详情
    viewSkillDetail(skill) {
      if (skill && skill.skillId) {
        this.$router.push({ name: 'SkillDetail', params: { skillId: skill.skillId } })
      } else {
        console.error('技能ID不存在:', skill)
      }
    },
    

    

    

      
      // 顶部导航栏事件处理
      handleNavigation(page) {
        this.router.push(`/${page === 'home' ? '' : page}`)
      },
      
      // 加载英雄推荐武器列表（带缓存）
      async loadHeroWeapons(heroId) {
        console.log('=== loadHeroWeapons 开始 ===');
        console.log('传入的heroId:', heroId, '类型:', typeof heroId);
        
        if (!heroId) {
          console.log('heroId为空，清空武器列表');
          this.heroWeapons = []
          return
        }
        
        // 命中缓存，直接使用
        if (this.weaponsCache && this.weaponsCache[heroId]) {
          console.log('使用缓存的武器数据:', this.weaponsCache[heroId])
          this.heroWeapons = this.weaponsCache[heroId]
          return
        }
        
        try {
          this.weaponsLoading = true
          console.log('正在加载英雄推荐武器，heroId:', heroId)
          
          const response = await weaponApi.getWeaponsByHeroId(heroId)
          console.log('武器API响应:', response)
          
          if (response.code === 0) {
            this.heroWeapons = response.data || []
            // 缓存武器数据
            if (!this.weaponsCache) {
              this.weaponsCache = {}
            }
            this.weaponsCache[heroId] = this.heroWeapons
            console.log('武器数据加载成功:', this.heroWeapons)
          } else {
            console.error('武器数据加载失败:', response.message)
            this.heroWeapons = []
          }
        } catch (error) {
          console.error('加载武器数据时出错:', error)
          this.heroWeapons = []
        } finally {
          this.weaponsLoading = false
          console.log('=== loadHeroWeapons 结束 ===');
        }
      },
      
      // 查看武器详情
      viewWeaponDetail(weapon) {
        console.log('查看武器详情:', weapon)
        // 跳转到武器页面并高亮显示该武器
        this.router.push({
          path: '/weapon',
          query: { weaponId: weapon.id }
        })
      },
      
      showLogin() {
        // 触发登录弹窗事件
        window.dispatchEvent(new CustomEvent('show-login-modal'))
      },
      
      showRegister() {
        // 触发注册弹窗事件
        window.dispatchEvent(new CustomEvent('show-register-modal'))
      },
      
      async handleLogout() {
        if (confirm('确定要退出登录吗？')) {
          await this.userStore.logout()
          console.log('用户已注销')
        }
      }
  }
}
</script>

<style scoped>
.hero-page {
  padding: 0;
  background: transparent;
}

/* 刷新控件样式 */
.refresh-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(45deg, #4ecdc4, #44a08d);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.refresh-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(78, 205, 196, 0.4);
}

.refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.refresh-icon {
  font-size: 16px;
  animation: none;
}

.refresh-btn:not(:disabled):hover .refresh-icon {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero-page {
  height: 100vh;
  color: white;
  background: rgba(0, 0, 0, 0.7);
  padding-top: 70px; /* 为顶部栏留出空间 */
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 10px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  font-size: 1.2rem;
  color: #b0b0b0;
  margin: 0;
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
}

.hero-main-display {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 30px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-image-section {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-main-image {
  width: 400px;
  height: 500px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.hero-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-info-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-name {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #ff6b6b;
}

.hero-title {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 20px;
  color: #4ecdc4;
  font-style: italic;
}

.hero-details {
  margin-bottom: 30px;
}

.hero-attribute {
  display: flex;
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.hero-attribute .label {
  color: #b0b0b0;
  min-width: 100px;
}

.hero-attribute .value {
  color: white;
  font-weight: 500;
}

.hero-description {
  margin-bottom: 15px;
  font-size: 1rem;
  line-height: 1.6;
  color: #d0d0d0;
  padding: 15px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  border: 1px solid rgba(78, 205, 196, 0.3);
}

.hero-actions {
  display: flex;
  align-items: center;
}

.play-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.play-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 20px rgba(255, 107, 107, 0.4);
}

.play-icon {
  color: white;
  font-size: 1.5rem;
  margin-left: 3px;
}

.hero-thumbnail-list {
  display: flex;
  gap: 15px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  overflow-x: auto;
  position: relative;
  align-items: center;
}

.hero-thumbnail {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 3px solid transparent;
}

.hero-thumbnail:hover {
  transform: scale(1.1);
}

.hero-thumbnail.active {
  border-color: #ff6b6b;
  box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
}

.hero-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.nav-arrow:hover {
  background: rgba(255, 255, 255, 0.3);
}

.nav-arrow-right {
  right: 10px;
}

.nav-arrow span {
  font-size: 1.5rem;
  color: white;
}

.loading-container,
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  text-align: center;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #ff6b6b;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.retry-btn {
  padding: 10px 20px;
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.3s ease;
}

.retry-btn:hover {
  background: #ff5252;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-main-display {
    flex-direction: column;
    text-align: center;
  }
  
  .hero-main-image {
    width: 300px;
    height: 400px;
  }
  
  .hero-name {
    font-size: 2rem;
  }
  
  .page-title {
    font-size: 2rem;
  }
}

/* 三栏英雄展示布局（左中右） */
.valkyrie-layout {
  display: grid; /* 改为网格布局 */
  grid-template-columns: 260px 1fr 600px; /* 左侧固定宽度，中间缩小，右侧增加宽度 */
  gap: 0; /* 去除间距 */
  width: 100vw; /* 占满视口宽度 */
  height: 100vh; /* 充满全屏高度 */
  padding: 0; /* 去除左右内边距 */
  margin: 0; /* 去除外边距 */
  position: relative; /* 相对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左侧对齐 */
  z-index: 1; /* 层级设置 */
}

.valkyrie-left {
  background: transparent; /* 改为透明背景 */
  border-radius: 12px;
  padding: 12px 8px;
  overflow-y: auto;
}

.name-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.name-item { cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: #cfd8dc; transition: all 0.25s ease; font-size: 18px; }
.name-item:hover { background:transparent; color: transparent; transform: translateX(4px); }
.name-item.active { background: rgba(78, 205, 196, 0.2); color: #fff; }
.name-item .dot { width: 6px; height: 6px; border-radius: 50%; background: #4ecdc4; }

.valkyrie-center { display: flex; align-items: center; justify-content: center; position: relative; overflow: visible; background: radial-gradient(ellipse at center, rgba(255,255,255,0.18), rgba(255,255,255,0.15) 60%); border-radius: 0; z-index: 3; transform: translateY(-50px); }
.hero-illus { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; position: relative; z-index: 3; }
.hero-illus img { max-height: 90vh; width: auto; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.35)); }

.valkyrie-left { background: rgba(255, 255, 255, 0.18); border-radius: 0; padding: 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; position: relative; z-index: 1; }
.valkyrie-left .codename { margin-bottom: 20px; }

.valkyrie-right { background: rgba(255, 255, 255, 0.18); border-radius: 0; padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; position: relative; z-index: 1; transform: none; }
.meta-header { display: flex; justify-content: flex-end; }
.phase-tabs .tab { color: rgba(255, 255, 255, 0.5); margin-left: 8px; }
.phase-tabs .tab.active { color: #4ecdc4; }

.codename { font-size: 28px; font-weight: 800; margin: 0; color: #fff; }

.meta-list { display: flex; flex-direction: column; gap: 8px; }
.meta-row { display: flex; gap: 12px; font-size: 16px; color: #d0d0d0; }
.meta-row .label { color: rgba(255, 255, 255, 0.6); min-width: 84px; }
.meta-row .value { color: #fff; }
.meta-row-double { display: flex; gap: 20px; font-size: 16px; color: #d0d0d0; }
.meta-item { display: flex; gap: 8px; flex: 1; }
.meta-item .label { color: rgba(255, 255, 255, 0.6); min-width: 70px; }
.meta-item .value { color: #fff; }

/* 姓名旁边的小图标样式 */
.name-with-icon {
  align-items: center;
}

.name-icon-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-mini-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(78, 205, 196, 0.5);
  object-fit: cover;
  transition: all 0.3s ease;
}

.hero-mini-icon:hover {
  border-color: #4ecdc4;
  transform: scale(1.1);
}



/* 背景介绍区域样式 */
.background-description {
  margin: 15px 0;
  padding: 15px;
  background: transparent;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* backdrop-filter: blur(10px); */
  transition: all 0.3s ease;
}

.background-description:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(78, 205, 196, 0.2);
}

.description-header {
  margin-bottom: 15px;
}

.description-title {
  font-size: 16px;
  font-weight: 600;
  color: #4ecdc4;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.description-title::before {
  content: '📖';
  font-size: 14px;
}

.description-divider {
  height: 2px;
  background: linear-gradient(90deg, #4ecdc4, transparent);
  border-radius: 1px;
  width: 60px;
}

.description-content {
  position: relative;
}

.description-text {
  font-size: 16px;
  line-height: 1.6;
  color: #e0e0e0;
  margin: 0;
  text-align: justify;
  word-wrap: break-word;
  text-indent: 2em;
}

.description-text::first-letter {
  font-size: 1.2em;
  font-weight: 600;
  color: #ff6b6b;
}

.thumb-strip { display: flex; gap: 10px; margin-top: 16px; padding-top: 8px; overflow-x: auto; }
.mini-thumb { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid transparent; flex: 0 0 auto; cursor: pointer; transition: transform 0.2s, border-color 0.2s; }
.mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mini-thumb:hover { transform: scale(1.06); }
.mini-thumb.active { border-color: #4ecdc4; box-shadow: 0 0 12px rgba(78,205,196,0.5); }

/* 技能展示区域样式 */
.skills-section {
  margin-top: 15px;
  padding: 0;
}

.skills-header {
  text-align: center;
  margin-bottom: 15px;
}

.skills-title {
  font-size: 20px;
  font-weight: 600;
  color: #4ecdc4;
  margin: 0 0 10px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.skills-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, #4ecdc4, transparent);
  border-radius: 1px;
  margin: 0 auto;
  width: 120px;
}

.skills-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}

.skills-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 15px;
}

.skill-card {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(78, 205, 196, 0.2);
  border-radius: 8px;
  padding: 12px;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.skill-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(78, 205, 196, 0.2);
  border-color: rgba(78, 205, 196, 0.4);
}

.clickable-skill {
  cursor: pointer;
}

.clickable-skill:hover {
  background: rgba(78, 205, 196, 0.1);
  border-color: rgba(78, 205, 196, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(78, 205, 196, 0.2);
}

.detail-icon {
  color: #4ecdc4;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 4px;
}

.detail-icon:hover {
  color: #ff6b6b;
  transform: scale(1.1);
}

.skill-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 6px;
}

.skill-header .skill-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}

.skill-gif {
  margin: 8px 0;
  text-align: center;
  border-radius: 4px;
  overflow: hidden;
}

.skill-gif-image {
  width: 100%;
  max-width: 120px;
  height: auto;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.skill-gif-image:hover {
  border-color: rgba(78, 205, 196, 0.5);
  transform: scale(1.05);
}

.skill-name {
  font-size: 18px;
  font-weight: 600;
  color: #4ecdc4;
  margin: 0;
  flex: 1;
}

.skill-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.skill-detail-btn, .skill-video-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.skill-detail-btn {
  background: linear-gradient(45deg, #4ecdc4, #44a08d);
  color: white;
}

.skill-detail-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(78, 205, 196, 0.3);
  background: linear-gradient(45deg, #44a08d, #4ecdc4);
}

.skill-video-btn {
  background: linear-gradient(45deg, #ff6b6b, #ee5a52);
  color: white;
}

.skill-video-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);
  background: linear-gradient(45deg, #ee5a52, #ff6b6b);
}

.detail-btn-icon, .video-btn-icon {
  font-size: 9px;
}

.skill-description {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

.skill-description p {
  margin: 0;
  font-size: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.no-skills {
  text-align: center;
  padding: 20px;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

.no-skills p {
  margin: 0;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .valkyrie-layout { grid-template-columns: 220px 1fr 360px; }
}
@media (max-width: 900px) {
  .valkyrie-layout { grid-template-columns: 1fr; min-height: auto; }
  .valkyrie-right { order: 2; }
  .thumb-strip { justify-content: center; }
  .valkyrie-left { order: 3; }
}
@media (max-width: 768px) {
  .skills-list {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .skill-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .skills-section {
    padding: 0 15px;
  }
}

/* 推荐武器区域样式 */
.recommended-weapons {
  margin-top: 30px;
  padding: 25px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.weapons-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.weapons-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #4ecdc4;
  margin: 0;
}

.weapons-icon {
  font-size: 1.2rem;
  color: #4ecdc4;
}

.weapons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.weapon-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.weapon-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 25px rgba(78, 205, 196, 0.2);
  border-color: rgba(78, 205, 196, 0.3);
}

.weapon-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4ecdc4, #44a08d);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.weapon-card:hover::before {
  opacity: 1;
}

.weapon-image {
  width: 100%;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.2);
}

.weapon-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.weapon-card:hover .weapon-image img {
  transform: scale(1.05);
}

.weapon-name {
  font-size: 1rem;
  font-weight: 600;
  color: white;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.weapon-type {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  padding: 4px 8px;
  background: rgba(78, 205, 196, 0.2);
  border-radius: 12px;
  display: inline-block;
}

.weapons-loading {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.6);
}

.loading-spinner {
  font-size: 1.5rem;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.no-weapons {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.6);
}

.no-weapons-icon {
  font-size: 3rem;
  margin-bottom: 15px;
  opacity: 0.5;
}

.no-weapons p {
  margin: 0;
  font-size: 1rem;
  font-style: italic;
}

@media (max-width: 768px) {
  .weapons-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }
  
  .weapon-card {
    padding: 12px;
  }
  
  .weapon-image {
    height: 100px;
  }
  
  .weapons-title {
    font-size: 1.2rem;
  }
}


</style>